<template>
    <div>
        <el-row style="height:60px;padding-top:15px">
            <div class="myinfo">
                <el-avatar :src="myInfo.img"></el-avatar>
                <span>{{myInfo.name}}</span>
            </div>
        </el-row>
        <el-row style="height:50px">
            <el-input v-model="keyword" placeholder="搜索好友">
            <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
        </el-row>
        <el-row style="height:390px">
            <el-table :data="tableData.filter(data => (!keyword||
                    (data.name.toLowerCase().includes(keyword.toLowerCase())))
                    &&
                    !(data.name.toLowerCase().includes(myInfo.name.toLowerCase())))" 
                stripe 
                style="width: 100%" 
                :show-header='false'
                @current-change = "setUserInfo"
                class="user-header"
            >
                <el-table-column  label="日期">
                <template slot-scope="scope">
                    <!-- <el-avatar :src="scope.row.img"></el-avatar> -->
                    <img :src="scope.row.img" style="width: 10%;height: 10%;border-radius: 5px;" />
                    <span class="head-portrait">{{ scope.row.name }}</span>
                </template>
                </el-table-column>
            </el-table>
        </el-row>
    </div>
</template>

<script>
import store from '../store/index';
export default {
    name: 'ChatroomMyAside',

    data() {
        return {
            keyword:'',
        };
    },

    mounted() {
        
    },
    computed:{
        myInfo(){
            return store.state.myInfo;
        },
        tableData(){
            return store.state.userList;
        }
    },
    methods: {
        setUserInfo(row, column, event){
            console.log(row, column, event);
            if(row.name=='默认群聊'){
                store.commit('changeChatType','group');
            }else{
                store.commit('changeChatType','private');
            }
            store.commit('setUserInfo',{name:row.name,img:row.img});
            },
    },
};
</script>

<style lang="scss" scoped>
.myinfo{
  text-align: left;
  vertical-align: middle;
//   margin-top: -10px;
  margin-left: 10px;
}
.myinfo span{
  text-align: left;
  vertical-align: middle;
}
.head-portrait{
    position: absolute;
    margin-left: 8px;
}
.user-header{
    cursor: pointer;
}

</style>